<template>
  <a-dialog v-if="user" :title="user.username+'的私信'" v-model="user">
    <div class="column scrollbar"
         :style="{'height': $q.screen.gt.sm ? '50vh' : '85vh',
         'width': $q.screen.gt.sm ? '508px' : ''}">
      <div id="letter-content" class="col" style="overflow-y: auto">
        <q-list v-if="querySet" no-border>
          <q-item v-for="(message, index) in querySetReverse" :key="index">
            <div class="text-grey-10 row" v-if="message.actor.id === user.id">
              <div>
                <a-head :user="message.actor" :username="false" class="q-mr-sm"></a-head>
              </div>
              <div class="bg-grey-2 q-pa-sm col border-radius-4">
                <div class="size-14 img-center" style="line-height: 1.5em" v-html="getSanitizeHtml(message.description)"></div>
                <div class="size-12 text-grey-6">{{ message.timestamp.slice(0, 16) }}</div>
              </div>
            </div>
            <div v-else class="text-grey-10 row justify-end full-width">
              <div class="row justify-end">
                <div class="bg-yellow-2 q-pa-sm col border-radius-4">
                  <div class="size-14" style="line-height: 1.5em" v-html="getSanitizeHtml(message.description)"></div>
                  <div class="size-12 text-grey-6">{{ message.timestamp.slice(0, 16) }}</div>
                </div>
                <div>
                  <a-head :user="message.actor" :username="false" class="q-ml-sm"></a-head>
                </div>
              </div>
            </div>
          </q-item>
        </q-list>
      </div>
      <a-text-input title="发送" :close-button="false" @submit="sendMessage"></a-text-input>
    </div>
  </a-dialog>
</template>

<script>
  import { querySetMixin } from '../mixins'
  import { sanitizeHtml } from '../utils/string'

  export default {
    name: 'layoutLetter',
    mixins: [querySetMixin],
    data () {
      return {
        api: '/api/user/notification_list/',
        limit: 20,
        user: null
      }
    },
    created () {
      this.$bus.$on('openMessageDialog', this.onOpen)
    },
    computed: {
      querySetReverse () {
        if (!this.querySet) {
          return null
        }
        const list = Object.assign([], this.querySet)
        return list.reverse()
      },
      queryParams () {
        if (!this.user) {
          return null
        }

        return {
          user_id: this.user.id,
          type: 'letter'
        }
      }
    },
    watch: {
      user () {
        this.querySet = null
        // this.query()
      },
      querySet (value, old) {
        if (old === null) {
          this.scrollToBottom()
        }
      }
    },
    methods: {
      onOpen (user) {
        this.user = user
      },
      getSanitizeHtml (html) {
        return sanitizeHtml(html, ['p', 'a', 'img'])
      },
      scrollToBottom () {
        this.$nextTick(() => {
          const el = document.querySelector('#letter-content')
          if (el) {
            el.scrollTo(0, el.scrollHeight)
          }
        })
      },
      async sendMessage (message) {
        const { status } = await this.postRequest({
          api: '/api/user/message/',
          data: {
            user_id: this.user.id,
            message
          }
        })

        if (status === 200) {
          this.querySet.unshift({
            actor: this.auth,
            recipient: this.user,
            description: message,
            verb: 'letter',
            timestamp: '刚才'
          })
          this.scrollToBottom()
        } else {
          this.$q.notify('发送失败，请稍后重试！')
        }
      }
    }
  }
</script>

<style lang="stylus">
</style>
